<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {deleteParameter, listParameter} from "../../../http/rabbitmq/parameter.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {onBeforeRouteLeave} from "vue-router";
import {createParameter} from "../../../http/rabbitmq/parameter.js";

const parameterName = ref("")
const parameterForm = ref({})

const parameterTableData = ref([])

const showParameterForm = ref(false)

function showParameterCreate() {
  parameterForm.value = {}
  showParameterForm.value = true
}

function handleParameterSave() {
  handleParameterCreate()
}

function handleParameterCreate() {
  createParameter(parameterForm.value).then(response => {
    handleParameterList()
    showParameterForm.value = false
  })
}


function handleParameterDelete(name) {
  deleteParameter(name).then(response => {
    handleParameterList()
    showParameterForm.value = false
  })
}

function handleParameterUpdate(data) {
  parameterForm.value = data
  showParameterForm.value = true
}

function handleParameterList() {
  listParameter(parameterName.value).then(response => {
    parameterTableData.value = response
  })
}

onMounted(() => {
  handleParameterList()
})

onUnmounted(() => {
})

onBeforeRouteLeave(() => {
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input v-model="parameterName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleParameterList">Search</el-button>
          <el-button type="primary" @click="showParameterCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="parameterTableData" border style="width: calc(100% - 5px); height: calc(100% - 50px)">
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="value">
        <template #default="scope">
          {{ scope.row.value }}
        </template>
      </el-table-column>
      <el-table-column label="operations" width="160" fixed="right">
        <template #default="scope">
          <el-button @click="handleParameterUpdate(scope.row)">
            修改
          </el-button>
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleParameterDelete(scope.row.name)"
              :title="'是否删除Parameter [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="parameter manage" v-model="showParameterForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="parameterFormRef" :model="parameterForm" label-width="160px">
      <el-form-item label="name">
        <el-select
            v-model="parameterForm.name"
            filterable
            allow-create
            clearable
        >
          <el-option
              v-for="item in rabbitmqStore().parameterList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="value">
        <el-input v-model="parameterForm.value"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleParameterSave">Save</el-button>
        <el-button @click="showParameterForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>